<template>
  <v-dialog
      v-model="visible"
      max-width="600"
  >
    <v-card
        style="border-radius:4px;width: 100%"
    >
      <div class="title">
        <h3 style="text-align: center;">{{ notice.noticeTitle }}</h3>
        <div class="time" style="text-align: right;width: 100%;font-size: 13px;">
          <span>{{ notice.createTime }}</span>
        </div>
      </div>
      <div
          class="content"
          v-html="notice.content"
      />
    </v-card>
  </v-dialog>
</template>

<script>
import {markdownToHtml} from '@/utils/article'
import dayjs from 'dayjs'

export default {
  name: 'ShoNotice',
  data() {
    return {
      visible: false,


    }
  },
  computed: {
    notice() {
      let notice = this.$store.state.blogInfo.noticeInfo
      notice.content = markdownToHtml(this.$store.state.blogInfo.noticeInfo.content)
      notice.createTime = dayjs().format('YYYY年MM月DD日 HH:mm')
      return notice
    }
  },
  methods: {
    open() {
      this.visible = true
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  width: 100%;
  padding: 10px 10PX 0 10PX;

  h3 {
    text-align: center;
  }

  time {
    text-align: right;
    width: 100%;
    font-size: 13px;

  }
}

.content {
  padding: 10px;
  border-top: dotted 1px #8b8989;
  min-height: 256px;
}
</style>